<template>
    <div class="com-cnt">
        <div class="orderHead">
            <div class="orderInfo">
                <p>{{orderStatus}}</p>
                <p>{{new Date(order.createdDate).toLocaleDateString().replace(/\//g, "-")}}</p>
            </div>
            <div class="userinfo" v-if="addContent.length > 0">
                <ul class="userinfoCon">
                    <li>
                        收货人：
                        <span>{{addContent[0].consignee}}</span>
                        <span></span>
                    </li>
                    <li>
                        收货地址：
                        <span>{{addContent[0].areaName}}{{addContent[0].address}}</span>
                    </li>
                    <li style="color:#FC8800">
                        (收货不便时，可选择免费代收货服务)
                    </li>
                </ul>
            </div>
        </div>
        <ul class="orderList">
            <li v-for="item in order.orderItems">
                <div class="orderPic"><img :src="item.thumbnail" alt=""></div>
                <div class="orderRight">
                    <p class="orderName">{{item.name}}</p>
                    <div class="orderPriceNum">
                        <span class="orderPrice">￥{{item.price}}</span>
                        <span class="orderNum">x{{item.quantity}}</span>
                    </div>
                </div>
            </li>
        </ul>
        <div>
            <h3 class="title">价格明细</h3>
            <p class="totalPrice">商品总价<span>￥{{order.amount}}</span></p>
            <h3 class="title">订单信息</h3>
            <p class="totalPrice">订单号 <span>{{order.sn}}</span></p>
            <p class="totalPrice">下单时间 <span>{{new Date(order.createdDate).toLocaleDateString().replace(/\//g, "-")+ " " + new Date(order.createdDate).toTimeString().substr(0,8)}}</span></p>
        </div>
        <!-- 已完成 -->
        <a class="btn" href="tel:4006666688" v-if="order.status == 'COMPLETED'">联系客服</a>
        <!-- 待发货待付款 -->
        <div class="cancel" v-if="order.status == 'PENDING_PAYMENT'||order.status == 'PENDING_SHIPMENT'||order.status == 'PENDING_REVIEW'">
            <p><a href="tel:4006666688" style="color:#333333">联系客服</a</p>
            <p class="cancalOrder" @click="cancelOrder">取消订单</p>
        </div>
        <!-- 已发货 -->
        <div class="cancel" v-if="order.status == 'SHIPPED'">
            <p><a href="tel:4006666688" style="color:#333333">联系客服</a</p>
            <p class="cancalOrder" @click="submitReceive">确认收货</p>
        </div>
    </div>
</template>
<script>
import { domain,domain2 } from "@/assets/js/config"
import axios from 'axios'
import Qs from 'qs'
import $ from "jquery"
import { maskTips } from '@/assets/js/dom'
export default {
  name: "scddPage",
  components: {},
  data() {
    return {
        phone:localStorage.getItem('phone'),
        orderSn: this.$route.query.orderSn,
        addContent: [],
        order: {orderItems:[]}
    };
  },
  computed: {
      orderStatus: function(){
        switch(this.order.status)
            {
                case 'PENDING_PAYMENT':
                return '待付款'
                case 'PENDING_REVIEW':
                return '待审核'
                case 'PENDING_SHIPMENT':
                return '待发货'
                case 'SHIPPED':
                return '已发货'
                case 'RECEIVED':
                return '已收货'
                case 'COMPLETED':
                return '已完成'
                case 'FAILED':
                return '已失败'
                case 'CANCELED':
                return '已取消'
                case 'DENIED':
                return '已拒绝'
            }
          
      }
  },
  mounted() {
        this.getAddress()
        this.getOrder()
  },
  methods: {
    direct: function (val,param){
        this.$router.push({ path: '/' + val,query: param });
    },
    getAddress: function(){
        let that = this
        axios({
            url: domain2 + '/shop/api/member/receiver/list',
            method: 'post',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: Qs.stringify({mobile:that.phone})
        }).then(res => { that.showAddress(res) }).catch(err => { console.log(err) })
    },
    showAddress: function(res){
        this.addContent = res.data.data.content
    },
    getOrder: function(){
        let that = this
        let orderSn = that.$route.query.sn
        axios({
            url: domain2 + '/shop/api/member/order/detail',
            method: 'post',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: Qs.stringify({mobile:that.phone,orderSn:orderSn})
        }).then(res => { that.getOrderSucc(res) }).catch(err => { console.log(err) })
    },
    getOrderSucc: function(res){
        if(res.data.code === 0){
            this.order = res.data.data.order
        }
    },
    toPay: function(){
        let userToken = localStorage.getItem('token')
        axios({
            url: domain2 + '/shop/api/order/payment?token='+userToken,
            method: 'post',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: Qs.stringify({orderSn:this.order.sn})
        }).then(res => { this.toPaySucc(res) }).catch(err => { console.log(err) })
    },
    toPaySucc: function(res){
        if(res.data.code === 0){
            maskTips({id:'pay-succ',txt:res.data.message})
        }
    },
    cancelOrder: function(){
        let that = this
        axios({
            url: domain2 + '/shop/api/member/order/cancel',
            method: 'post',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: Qs.stringify({mobile:that.phone,orderSn:that.order.sn})
        }).then(res => { that.cancelOrderess(res) }).catch(err => { console.log(err) })
    },
    cancelOrderess: function(res){
        let that = this
        maskTips({id:'cancelOrderess',txt:res.data.message})
        setTimeout(function(){
            that.$router.push('scdd')
        },1000)
    },
    submitReceive: function(){
        let that = this
        axios({
            url: domain2 + '/shop/api/member/order/receive',
            method: 'post',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: Qs.stringify({mobile:that.phone,orderSn:that.order.sn})
        }).then(res => { that.submitReceiveSucc(res) }).catch(err => { console.log(err) })
    },
    submitReceiveSucc: function(res){
        let that = this
        maskTips({id:'alert-info'+new Date().getTime(),txt:res.data.message})
        setTimeout(function(){
            that.$router.push('scdd')
        },1000)
    }
  }
};
</script>

<style lang="stylus" scoped>
.com-cnt
    width: 100%
    height: 100%
    .orderHead
        background #f0f0f0
        font-size 12px
        .orderInfo
            font-size 14px
            line-height 29px
            margin 0 12px
            border-bottom 1px solid #999999
        .userinfo
            height: 120px
            font-size: 14px
            padding: 20px 0 0 12px
    .orderList
        padding 0 12px
        color #333333
        font-size 12px
        li 
            border-bottom 1px solid #f0f0f0
            overflow hidden
            padding 12px 0
            .orderPic
                float left
                width 62px
                height 62px
                img
                    width 100%
                    height 100%
            .orderRight
                float left
                margin-left 12px
                width 275px
                .orderName
                    float left
                    width 275px
                    height 28px
                .orderPriceNum
                    height 12px
                    .orderPrice
                        float left
                    .orderNum
                        float right 
    .title
        height 44px
        line-height 44px
        background #f0f0f0
        text-indent 12px
        font-size 14px
    .totalPrice
        font-size 12px
        padding 0 12px
        height 30px
        line-height 30px
        span 
            float right
    .footer
        position fixed
        bottom 0
        font-size 12px
        width 100%
        height 50px
        line-height 50px
        border-top 1px solid #cccccc
        p 
            width 50%
            float left
            text-align center
            span
                color #FF7E00
                font-size 16px
        .lastp
            background #aad112
            color #ffffff
            font-size 16px
    .btn
        width 334px
        height 50px
        line-height 50px
        background #aad112
        color #ffffff
        border-radius 5px
        font-size 18px
        text-align center
        display block
        margin 20px 0 20px 20px
    .cancel
        height 50px
        font-size 18px
        margin 20px 0
        p 
            width 170px
            height 50px
            line-height 50px
            margin-left 12px
            float left
            border 1px solid #666666
            text-align center
            border-radius 5px
        p.cancalOrder
            background #aad112
            color #ffffff
            border none
            



        
</style>